import React, { useEffect, useRef, useContext, useState, useCallback, useMemo } from 'react';
import { ScrollView, Dimensions, Image, ImageBackground, Text, TextInput, TouchableOpacity, View, Alert, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import Ionicons from 'react-native-vector-icons/Ionicons';

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height
const artImgWidth = width / 4.2;
const artImgHeight = artImgWidth * 124 / 510
const mTop = height / 5

const createStyles = () =>
    StyleSheet.create({
        item: {
            backgroundColor: "#fafafa",
            margin: 8,
            marginHorizontal: 10,
            borderRadius: 20,
            // flex: 1,
            height: 45,
            width: '100%',
            borderColor: '#ddd',
            paddingHorizontal: 20,
            alignItems: 'center',
            alignContent: 'center'
        }
    });

export const Home = (props) => {

    return (
        <SafeAreaView style={{ backgroundColor: '#fff' }} edges={['top']}>
            <ScrollView style={{ backgroundColor: '#fff' }} >
                <View style={{ backgroundColor: '#fff',}}>
                    <Image style={{ marginBottom: 5, width: artImgWidth, height: artImgHeight, alignSelf: 'center' }} source={require('../../img/art7.png')} />

                </View>

                <View style={{ padding: 12, backgroundColor: 'rgb(250,250,250)' }}>

                    <Image style={{ borderRadius: 3, width: width - 24, height: (width - 24) / 10 * 9 / 2084 * 597 }} source={require('../../img/h1.jpg')} />
                </View>
                <View style={{ backgroundColor: 'rgb(250,250,250)', }}>
                    <View style={{ marginHorizontal: 12,marginVertical:5, flexDirection: 'row', alignItems: 'center' }}>
                        <Text style={{ height: 16, width: 3, backgroundColor: '#000', marginRight: 4 }} />
                        <Text style={{ fontWeight: 'bold', fontSize: 16 }}>起名宝典</Text>
                    </View>
                    <View style={{
                        backgroundColor: '#fff',
                        borderRadius: 3,
                        margin: 12,
                        padding: 12,
                        // borderWidth:1,
                        

                        // elevation: 5,

                    }}>
                        <TouchableOpacity
                            onPress={() => {
                                props.navigation.navigate('Detail', { tag: 'w1', title: '起名原则、好名标准' })
                            }}
                            style={{ borderColor: '#eee', borderBottomWidth: StyleSheet.hairlineWidth, paddingVertical: 15, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                            <Text numberOfLines={2} style={{ fontSize: 16 }}>起名原则、好名标准</Text>
                            <Ionicons
                                name='chevron-forward-outline'
                                size={22}
                                color={"#eee"}
                            />
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={() => {
                                props.navigation.navigate('Detail', { tag: 'w2', title: '2023年给兔宝宝起名有哪些需要注意的？' })
                            }}
                            style={{ borderColor: '#eee', borderBottomWidth: StyleSheet.hairlineWidth, paddingVertical: 15, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                            <Text numberOfLines={2} style={{ fontSize: 16 }}>2023年给兔宝宝起名有哪些需要注意的？</Text>
                            <Ionicons
                                name='chevron-forward-outline'
                                size={22}
                                color={"#eee"}
                            />
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={() => {
                                props.navigation.navigate('Detail', { tag: 'w3', title: '什么是生辰八字？' })

                            }}
                            style={{  paddingVertical: 15, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                            <Text numberOfLines={2} style={{ fontSize: 16 }}>什么是生辰八字？</Text>
                            <Ionicons
                                name='chevron-forward-outline'
                                size={22}
                                color={"#eee"}
                            />
                        </TouchableOpacity>
                    </View>
                    <View style={{ marginHorizontal: 10,marginVertical:5, flexDirection: 'row', alignItems: 'center' }}>
                        <Text style={{ height: 16, width: 3, backgroundColor: '#000', marginRight: 4 }} />
                        <Text style={{ fontWeight: 'bold', fontSize: 16 }}>五行元素</Text>
                    </View>
                    <View style={{
                        backgroundColor: '#fff',
                        borderRadius: 3,
                        margin: 12,
                        padding: 12,
                        // borderWidth:1,
                        // shadowColor: "#bbb",
                        // shadowOffset: {
                        //     width: 0,
                        //     height: 2,
                        // },
                        // shadowOpacity: 0.25,
                        // shadowRadius: 3.84,

                        // elevation: 5,

                    }}>
                        <TouchableOpacity
                            onPress={() => {
                                props.navigation.navigate('Detail', { tag: 'w7', title: '五行相生、相克关系' })
                            }}
                            style={{ borderColor: '#eee', borderBottomWidth: StyleSheet.hairlineWidth, paddingVertical: 15, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                            <Text numberOfLines={2} style={{ fontSize: 16 }}>五行相生、相克关系</Text>
                            <Ionicons
                                name='chevron-forward-outline'
                                size={22}
                                color={"#eee"}
                            />
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={() => {
                                props.navigation.navigate('Detail', { tag: 'w8', title: '如何选择五行起名？' })

                            }}
                            style={{ borderColor: '#eee', borderBottomWidth: StyleSheet.hairlineWidth, paddingVertical: 15, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                            <Text numberOfLines={2} style={{ fontSize: 16 }}>如何选择五行起名？</Text>
                            <Ionicons
                                name='chevron-forward-outline'
                                size={22}
                                color={"#eee"}
                            />
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={() => {
                                props.navigation.navigate('Detail', { tag: 'w9', title: '关于汉字的五行划分' })


                            }}
                            style={{  paddingVertical: 15, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                            <Text numberOfLines={2} style={{ fontSize: 16 }}>关于汉字的五行划分</Text>
                            <Ionicons
                                name='chevron-forward-outline'
                                size={22}
                                color={"#eee"}
                            />
                        </TouchableOpacity>
                    </View>
                    <View style={{ marginHorizontal: 12, marginTop: 5,marginVertical:5, flexDirection: 'row', alignItems: 'center' }}>
                        <Text style={{ height: 16, width: 3, backgroundColor: '#000', marginRight: 4 }} />
                        <Text style={{ fontWeight: 'bold', fontSize: 16 }}>专家讲座</Text>
                    </View>
                    <View style={{
                        backgroundColor: '#fff',
                        borderRadius: 3,
                        margin: 12,
                        padding: 12,
                        // borderWidth:1,
                        // shadowColor: "#bbb",
                        // shadowOffset: {
                        //     width: 0,
                        //     height: 2,
                        // },
                        // shadowOpacity: 0.25,
                        // shadowRadius: 3.84,

                        // elevation: 5,

                    }}>
                        <TouchableOpacity
                            onPress={() => {
                                props.navigation.navigate('Detail', { tag: 'w4', title: '怎样取一个不落俗套的名字？' })

                            }}
                            style={{ borderColor: '#eee', borderBottomWidth: StyleSheet.hairlineWidth, paddingVertical: 15, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                            <Text numberOfLines={2} style={{ fontSize: 16 }}>怎样取一个不落俗套的名字？</Text>
                            <Ionicons
                                name='chevron-forward-outline'
                                size={22}
                                color={"#eee"}
                            />
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={() => {
                                props.navigation.navigate('Detail', { tag: 'w5', title: '什么是八字强弱、八字分哪几类？' })

                            }}
                            style={{ borderColor: '#eee', borderBottomWidth: StyleSheet.hairlineWidth, paddingVertical: 15, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                            <Text numberOfLines={2} style={{ fontSize: 16 }}>什么是八字强弱、八字分哪几类？</Text>
                            <Ionicons
                                name='chevron-forward-outline'
                                size={22}
                                color={"#eee"}
                            />
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={() => {
                                props.navigation.navigate('Detail', { tag: 'w6', title: '什么是天干地支？' })

                            }}
                            style={{  paddingVertical: 15, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                            <Text numberOfLines={2} style={{ fontSize: 16 }}>什么是天干地支？</Text>
                            <Ionicons
                                name='chevron-forward-outline'
                                size={22}
                                color={"#eee"}
                            />
                        </TouchableOpacity>
                    </View>



                </View>

            </ScrollView>
        </SafeAreaView>
    )
}

